<template>
  <section :class="classList.join(' ')" @click="handleEdit">
    <header class="header">
      <div class="title-box">
        <template v-if="isStartNode">
          <LocationFilled class="iconfont"/>
        </template>
        <template v-if="isEmptyNode">
          <Connection class="iconfont"/>
        </template>
        <template v-if="isApprNode">
          <Stamp class="iconfont"/>
        </template>
        <template v-if="isCopyNode">
          <Promotion class="iconfont"/>
        </template>
        <span class="title-text">
          <template v-if="conf.type!='empty'">{{ conf.properties.title }}</template>
          <template v-else>合并节点</template>
        </span>
        <template v-if="!isStartNode">
          <input v-model="conf.properties.title" class="title-input" @click="stopPro"/>
        </template>
      </div>
    </header>
    <div class="body">
      <span class="text">
        <template v-if="conf.type!='empty'">{{ conf.content }}</template>
        <template v-else>合并</template>
      </span>
    </div>
    <NodeInfo :conf="conf"/>
  </section>
</template>
<script setup>
import {ElIcon} from 'element-plus';
import {Close} from '@element-plus/icons-vue';
import {
  NodeUtils,
  stopPro
} from './util.js';
import NodeInfo from "@/views/flow/createDirectly/Process/FlowCard/NodeInfo.vue";
const props = defineProps({
  conf: {
    type: Object,
    default: () => undefined
  },
  prevData: {
    type: Object,
    default: () => undefined
  },
  eventLancher: {
    type: Function,
    required: true
  }
});
const emits = defineEmits(['edit',
  'deleteNode']);
const classList = ref(["flow-path-card"]);
const afterTrue = (isTrue,
                   name) => {
  if (isTrue) classList.value.push(name);
  return isTrue;
};
const isStartNode = afterTrue(NodeUtils.isStartNode(props.conf),
    "start-node");
const isApprNode = afterTrue(NodeUtils.isApproverNode(props.conf),
    "approver");
const isCopyNode = afterTrue(NodeUtils.isCopyNode(props.conf),
    "copy");
const isEmptyNode = afterTrue(NodeUtils.isEmptyNode(props.conf),
    "empty");
const handleEdit = () => {
  props.eventLancher('edit',
      props.conf);
};

</script>
<style scoped lang="scss">
</style>
